Tailwind component

Tailwind Component

tip

If we have two similar components. We should use tailwind component detective to reduce the amount of code.

@tailwind components // This is necessary here.
@layer components { // define our new custom css collections.
  .alert { // define a new tailwind css name
    @apply flex flex-col p-4 pt-2 w-full border-l-8; // include the sub tailwind css
  }
  .alert-title {
    @apply font-semibold italic text-lg;
}
  .alert-content {
    @apply leading-tight text-sm;
}
.alert-info {
    @apply bg-blue-100 border-blue-500
}
  .alert-info-title {
    @apply text-blue-500;
}
  .alert-info-content {
    @apply text-blue-800;
}
  .alert-warning {
    @apply bg-red-100 border-red-500
}
  .alert-warning-title {
    @apply text-red-500;
}
  .alert-warning-content {
    @apply text-red-800;
} }